<template>
  <div>
    <ContentWrap>
      <back :backOption="backOption" class="mb-20px" />
      <div class="text-right">
        <el-button @click="test" :loading="saveLoading">测试</el-button>
        <el-button @click="submit" type="primary" :loading="saveLoading">保存</el-button>
      </div>
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="250">
        <sub-title title="基本信息" />
        <el-form-item label="接口名称" prop="name">
          <ns-input v-model="formData.name" placeholder="请输入接口名称" />
        </el-form-item>
        <el-form-item label="接口描述" prop="description">
          <ns-input v-model="formData.description" placeholder="请输入接口描述" />
        </el-form-item>
        <el-form-item label="是否开启接口" prop="enable">
          <el-radio-group v-model="formData.enable">
            <el-radio :label="1" :value="1">开启</el-radio>
            <el-radio :label="0" :value="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="接口代码" prop="code">
          <el-input v-model="formData.code" type="textarea" placeholder="请输入接口代码" />
        </el-form-item>
        <sub-title title="请求参数配置" />
        <el-table :data="formData.parameters" style="width: 100%">
          <el-table-column label="参数名称">
            <template #default="scope">
              <ns-input v-model="scope.row.name" />
            </template>
          </el-table-column>
          <el-table-column label="参数类型">
            <template #default="scope">
              <el-select v-model="scope.row.type">
                <el-option
                  v-for="(ite, i) in paramsTypeList"
                  :key="i"
                  :label="ite.label"
                  :value="ite.value"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="参数实例">
            <template #default="scope">
              <ns-input v-model="scope.row.example" />
            </template>
          </el-table-column>
          <el-table-column label="是否必填">
            <template #default="scope">
              <el-switch v-model="scope.row.required" />
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template #default="scope">
              <ns-input v-model="scope.row.remark" />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                :icon="Minus"
                size="small"
                circle
                v-if="scope.$index !== 0"
                class="ml-12px"
                @click="delRow(scope.$index)"
              />
              <el-button
                :icon="Plus"
                size="small"
                circle
                class="ml-12px"
                @click="addRow(scope.$index)"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </ContentWrap>
  </div>
</template>
<script lang="ts" setup>
import SubTitle from '@/components/SubTitle/index.vue'
import * as InterfaceApi from '@/api/system/interface'
import { Plus, Minus, Close } from '@element-plus/icons-vue'
const route = useRoute()
const message = useMessage() // 消息弹窗
const backOption = ref({
  title: '返回'
})
const formRef = ref()
const saveLoading = ref(false)
const formData = ref({
  name: '',
  description: '',
  enable: '',
  code: '',
  parameters: [
    {
      name: '',
      type: '',
      example: '',
      required: false,
      remark: ''
    }
  ]
})
const rules = {
  name: [{ required: true, message: '接口名称不能为空', trigger: 'blur' }],
  description: [{ required: true, message: '接口描述不能为空', trigger: 'blur' }],
  enable: [{ required: true, message: '是否开启接口不能为空', trigger: 'blur' }],
  code: [{ required: true, message: '接口代码不能为空', trigger: 'blur' }]
}

const paramsTypeList = [
  {
    label: 'Object',
    value: 'Object'
  },
  {
    label: 'String',
    value: 'String'
  },
  {
    label: 'Array',
    value: 'Array'
  },
  {
    label: 'Integer',
    value: 'Integer'
  },
  {
    label: 'Boolean',
    value: 'Boolean'
  },
  {
    label: 'Number',
    value: 'Number'
  }
]

const delRow = (index) => {
  formData.value.parameters.splice(index, 1)
}
const addRow = (index) => {
  formData.value.parameters.push({
    name: '',
    type: '',
    example: '',
    required: false,
    remark: ''
  })
}

const submit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        saveLoading.value = true
        const SubmitApi = route.query.id
          ? InterfaceApi.interfaceUpdate
          : InterfaceApi.interfaceCreate
        const data = await SubmitApi(formData.value)
        if (data) {
          message.success('操作成功')
          if (!route.query.id) {
            route.query.id = data
          }
          getDetail()
        }
      } catch {
      } finally {
        saveLoading.value = false
      }
    }
  })
}
const test = () => {
  if (!formData.value.address) {
    message.warning('请先保存再执行测试操作')
    return
  }
  formRef.value.validate(async (valid) => {
    if (valid) {
      const params = formData.value.parameters.reduce((obj, param) => {
        obj[param.name] = param.type == 'Integer' ? Number(param.example) : param.example
        return obj
      }, {})
      const data = await InterfaceApi.interfaceExecute(formData.value.address, params)
      console.log('data', data)
      if (data) {
        message.success(data)
      }
    }
  })
}

const getDetail = async () => {
  const data = await InterfaceApi.interfaceGet(route.query.id)
  console.log('data', data)
  formData.value = data
}
onMounted(() => {
  if (route.query.id) {
    getDetail()
  }
})
</script>

<style lang="scss" scoped></style>
